<!--
 @description 经销商档案管理-经销商冻结/解冻管理
 @fileName index.vue
 @author zengqiongying
 @created 2023/04/13 15:29:51
-->
<template>
  <div class="has-foot-pb">
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="searchValue"
        placeholder="输入经销商编码/经销商名称"
        @search="onSearch"
        @clear="onClear"
        @cancel="onSearch"
      />
    </div>

    <div class="ctm-content-tabs-sticky">
      <qmp-tabs
        ref="qmpTabs"
        v-model:active="activeTab"
        animated
        lazy-render
        class="tab-nav-transparent"
        @change="tabOnChange"
      >
        <qmp-tab v-for="(tab, i) in tabs" :key="i" :title="tab.title" :name="tab.name">
          <List
            :ref="(el) => setListRef(el, tab.name)"
            class="customer-change-list"
            :search-value="searchValue"
            :type="tab.name"
            page-type="E,F"
          />
        </qmp-tab>
      </qmp-tabs>
    </div>
    <div class="ctm-content-foot">
      <div v-if="checkBtnPermission('freeze_apply')" class="btn ctm-btn-main radius-larg" @click="onCreate('E', 'A')">
        冻结申请
      </div>
      <div v-if="checkBtnPermission('unfreeze_apply')" class="btn ctm-btn-main radius-larg" @click="onCreate('F', 'A')">
        解冻申请
      </div>
      <div v-if="checkBtnPermission('freeze')" class="btn ctm-btn-main radius-larg" @click="onCreate('E', 'B')">
        冻结
      </div>
      <div v-if="checkBtnPermission('unfreeze')" class="btn ctm-btn-main radius-larg" @click="onCreate('F', 'B')">
        解冻
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { toRefs, getCurrentInstance, watch } from 'vue'
  import { useRouter, onBeforeRouteLeave } from 'vue-router'
  import { useStore } from 'vuex'
  import { CommonPage } from '../mixins/CommonPage'
  import SearchInput from '@/components/SearchInput/index.vue'
  import List from '../components/CustomerChangeList/List.vue'
  import { queryBtnList } from '@/apis/dataDict'

  export default {
    name: 'DealerInfoFreezeAndthaw',
    components: { SearchInput, List },
    setup() {
      const $router = useRouter()
      const $store = useStore()
      const instance = getCurrentInstance()
      const { datas, onSearch, onClear, tabOnChange, setListRef } = CommonPage(
        'dealerFreezeAndthaw',
        $router,
        $store,
        instance
      )
      datas.btnList = []
      onBeforeRouteLeave((to, from, next) => {
        const instanceName = instance?.type?.name
        if (to.name === 'Index') {
          $store.commit('routerKeep/removeCache', instanceName)
        } else {
          $store.commit('routerKeep/resetCache', instanceName)
        }
        next()
      })
      const onCreate = (type: string, reportType: string) => {
        let query = { type, reportType }
        $router.push({
          path: `/dealerFreezeAndthaw/add`,
          query
        })
      }
      watch(
        () => datas.btnList,
        (btns) => {
          const tabList = []
          if (btns && btns.length > 0) {
            if (checkBtnPermission('saved')) {
              tabList.push({ title: '已保存', name: 'saved' })
            }
            if (checkBtnPermission('all')) {
              tabList.push({ title: '全部', name: 'all' })
            }
          }
          datas.tabs = tabList
          datas.activeTab = tabList.length > 0 ? tabList[0].name : ''
        },
        {
          immediate: true,
          deep: true
        }
      )
      const getBtnList = () => {
        if (process.env.QMP_EVN === 'development') {
          datas.btnList = [
            { buttonCode: 'saved', buttonName: '已保存' },
            { buttonCode: 'all', buttonName: '全部' },
            { buttonCode: 'freeze_apply', buttonName: '冻结申请' },
            { buttonCode: 'unfreeze_apply', buttonName: '解冻申请' },
            { buttonCode: 'freeze', buttonName: '冻结' },
            { buttonCode: 'unfreeze', buttonName: '解冻' }
          ]
          return
        }
        queryBtnList('dealerfreezeandthaw').then((res: any) => {
          datas.btnList = res.data || []
        })
      }
      const checkBtnPermission = (btnCode: string) => {
        if (datas.btnList.length) {
          return datas.btnList.some((v: any) => v.buttonCode === btnCode)
        }
        return false
      }
      getBtnList()

      return {
        ...toRefs(datas),
        onSearch,
        onClear,
        onCreate,
        tabOnChange,
        setListRef,
        checkBtnPermission
      }
    }
  }
</script>
<style lang="less" scoped>
  .customer-change-list {
    position: relative;
    padding: 0 14px;
  }
</style>
